/*
  学习目标：使用useEffect发送请求
  步骤：
     1. 下载axios
     2. 准备utils/request.js
     3. 封装API
     4. 挂载后， 调用api函数
*/
import React, { useState } from 'react';
import { useEffect } from 'react';
import { getChannelsAPI } from './api/channel';

export default function App() {
  const [list, setList] = useState([]);

  const loadData = async () => {
    const res = await getChannelsAPI();
    setList(res.data.channels);
  };

  // 💥 useEffect接收的回调函数， 必须是同步的
  useEffect(() => {
    loadData();
  }, []);

  return (
    <div>
      {list.map((item) => {
        return <div key={item.id}>{item.name}</div>;
      })}
    </div>
  );
}
